<template>
  <el-dialog
    v-model="visibleModel"
    title="常用商品数据"
    style="height:400px; width:100%; max-width:700px; display:flex; flex-direction:column;"
    align-center
    draggable
    @close="handleClose"
  >
    <el-table 
      :data="skuData"
      style="width: 100%; height: 95%;" 
      @row-click="handleClick"
      v-loading="loading"
      element-loading-text="常用商品数据加载中..."
      :cell-style="{ cursor: 'pointer' }"
    >
      <el-table-column prop="skuName" label="商品名称" min-width="130" />
      <el-table-column prop="skuBrand" label="牌号/款式" min-width="100" />
      <el-table-column prop="internalBrand" label="内部牌号" min-width="100" />
      <el-table-column prop="specification" label="规格型号" min-width="120" />
      <el-table-column prop="unit" label="订货单位" min-width="90" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { useOrderStore } from '@/stores/sale/order'
import { getUsualSkuInfo } from '@/pages/home/views/sale/api/order'
import * as CONFIG from '@/pages/home/views/sale/config/order'

const visibleModel = defineModel()
const orderStore = useOrderStore()
const loading = ref(true)

const { index } = defineProps<{
  index: number
}>()

const skuData = ref([])

const handleClose = () => {
  visibleModel.value = false
}
const handleClick = (val) => {
  for(let key in val){
    orderStore.order.skuList[index][key] = val[key]
  }
  const skuIndex = orderStore.order.skuList[index]
  const matchType = skuIndex.skuName.match(CONFIG.SKU_SPEC.SPEC_DETECTION)
  if(matchType){
    skuIndex.skuType = matchType[1]
    skuIndex.specDiameter = skuIndex.specification.match(CONFIG.SKU_SPEC.SPEC_REGEX_1)?.[1]
    skuIndex.specInnerD = skuIndex.specification.match(CONFIG.SKU_SPEC.SPEC_REGEX_2)?.[1]
    skuIndex.specLength = skuIndex.specification.match(CONFIG.SKU_SPEC.SPEC_REGEX_3)?.[1]
    skuIndex.specWidth = skuIndex.specification.match(CONFIG.SKU_SPEC.SPEC_REGEX_4)?.[1]
    skuIndex.specThickness = skuIndex.specification.match(CONFIG.SKU_SPEC.SPEC_REGEX_5)?.[1]
    skuIndex.specEccentricD = skuIndex.specification.match(CONFIG.SKU_SPEC.SPEC_REGEX_6)?.[1]
    if(["镜","环","针"].includes(skuIndex.skuType)){
      skuIndex.byQuantity = "1"
      skuIndex.unit = "pcs"
    }
  }
  else {
    skuIndex.skuType = "其他"
    skuIndex.specOtherSpec = skuIndex.specification
    skuIndex.byQuantity = "1"
    skuIndex.unit = "pcs"
  }
  if(skuIndex.unit === "kg") skuIndex.byQuantity = "0"
  handleClose()
}
const getUsualSkuTableData = async () => {
    const usualSkuInfo = await getUsualSkuInfo()
    skuData.value = usualSkuInfo.data.data
    loading.value = false
}

defineExpose({
    getUsualSkuTableData
})
</script>

<style scoped>
.el-table {
    --el-table-header-bg-color: var(--el-bg-color-page);
    --el-table-border-color: var(--el-border-color-dark);
    --el-table-header-text-color: var(--el-text-color-primary);
}
/* :deep(.el-dialog__body) {
    overflow: auto;
    flex: 1;
} */
</style>